<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>云端文件上传 | DataLake</title>
    <style>
        :root {
            --primary-color: #4361ee;
            --success-color: #06d6a0;
            --error-color: #ef476f;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
            max-width: 800px;
            margin: 2rem auto;
            padding: 0 20px;
            background-color: #f8f9fa;
        }

        .container {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 2rem;
            transition: transform 0.2s ease;
        }

        h1 {
            color: #2b2d42;
            text-align: center;
            margin-bottom: 2rem;
            font-weight: 600;
        }

        .upload-section {
            position: relative;
            border: 2px dashed #adb5bd;
            border-radius: 8px;
            padding: 2rem;
            text-align: center;
            background: #f8f9fa;
            margin-bottom: 1.5rem;
            transition: border-color 0.3s ease;
        }

        .upload-section:hover {
            border-color: var(--primary-color);
        }

        .file-input {
            display: none;
        }

        .custom-upload-btn {
            background: linear-gradient(135deg, var(--primary-color), #4895ef);
            color: white;
            padding: 0.8rem 1.5rem;
            border-radius: 6px;
            cursor: pointer;
            border: none;
            font-weight: 500;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .custom-upload-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(67, 97, 238, 0.3);
        }

        #selectedFileName {
            margin-top: 1rem;
            color: #495057;
            font-size: 0.9rem;
        }

        #uploadStatus {
            padding: 1rem;
            border-radius: 6px;
            margin-top: 1rem;
            display: none;
        }

        .status-success {
            background: #e8f8f4;
            color: var(--success-color);
            border: 1px solid var(--success-color);
        }

        .status-error {
            background: #fdedf0;
            color: var(--error-color);
            border: 1px solid var(--error-color);
        }

        .loading {
            position: relative;
            pointer-events: none;
        }

        .loading::after {
            content: "";
            position: absolute;
            right: -30px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
            to {
                transform: translateY(-50%) rotate(360deg);
            }
        }
    </style>
</head>
<body>
<div class="container">
    <h1>📁 文件上传</h1>

    <div class="upload-section">
        <label class="custom-upload-btn" for="fileInput">
            <span>选择文件</span>
            <input class="file-input" id="fileInput" type="file">
        </label>
        <div id="selectedFileName"></div>
    </div>

    <button class="custom-upload-btn" onclick="uploadFile()" style="width: 100%">
        上传存储
    </button>

    <div id="uploadStatus"></div>
</div>

<script>
    // 显示选中的文件名
    document.getElementById('fileInput').addEventListener('change', function (e) {
        document.getElementById('selectedFileName').textContent =
            `已选择文件：${e.target.files[0]?.name || '未选择任何文件'}`;
    });

    async function uploadFile() {
        const fileInput = document.getElementById('fileInput');
        const statusDiv = document.getElementById('uploadStatus');
        const btn = document.querySelector('button');

        if (!fileInput.files[0]) {
            statusDiv.textContent = '请先选择要上传的文件';
            statusDiv.className = 'status-error';
            statusDiv.style.display = 'block';
            return;
        }

        btn.classList.add('loading');
        statusDiv.style.display = 'none';

        try {
            const formData = new FormData();
            formData.append('file', fileInput.files[0]);

            const response = await fetch('http://127.0.0.1:8080/api/hdfs/upload', {
                method: 'POST',
                body: formData
            });

            const result = await response.json();
            if (result.status === 'temp_success') {
                statusDiv.textContent = '✅ 文件已安全抵达，等待接收方验证';
                statusDiv.className = 'status-success';
                localStorage.setItem('tempFilePath', result.tempPath);
            } else {
                statusDiv.textContent = '⛔ 暂存失败: ' + (result.message || '未知错误');
                statusDiv.className = 'status-error';
            }
        } catch (error) {
            console.error('上传失败:', error);
            statusDiv.textContent = '⚠️ 上传失败: ' + (error.message || '网络错误');
            statusDiv.className = 'status-error';
        } finally {
            btn.classList.remove('loading');
            statusDiv.style.display = 'block';
        }
    }
</script>
</body>
</html>